<template>
    <div>食材管理</div>
    <div>
        <!-- 表格子组件 -->
        <ETable v-bind="tableConifg" ref="table">

            <template #buttons="{ delAll }">
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="danger" @click="delAll">批量删除</el-button>
            </template>

            <template #operation="{ row, del }">
                <el-button link type="primary" @click="edit(row.id)">编辑</el-button>
                <el-button link type="primary" @click="del(row.id)">价格更新</el-button>
                <el-button link type="danger" @click="del(row.id)">价格分析</el-button>
                <el-button link type="danger" @click="del(row.id)">删除</el-button>
            </template>
        </ETable>
    </div>

    <AddFood :dialogVisible="dialogVisible" :changeId="isId" :changeParent="changeParent" @closeDialog="closeDialog" />
</template>

<script setup lang='ts'>
import { delFood, delFoods, getFoods } from '@/apis/diet/food';
import ETable, { type TableType } from '../../components/ETable.vue';
import AddFood from './AddFood.vue';
import { el } from 'element-plus/es/locales.mjs';
import { ref, reactive } from 'vue';

// 操作子组件中的数据
const table=ref();

// 添加弹出页标记
const dialogVisible = ref(false)
// 传给子组件的方法
const changeParent = (val:boolean)=>{
    dialogVisible.value = val
}

const closeDialog = (val:boolean)=>{
   if(!val){
      table.value.getData()
   }
}

const tableConifg: TableType = {
    isSearch: false,
    loadData: getFoods,
    columns: [
        { prop: 'id', label: '序号' },
        { prop: 'name', label: '物料名称' },
        { prop: 'unit', label: '单位' },
        { prop: 'supplierName', label: '供应商' },
        { prop: 'wholePrice', label: '批发价' },
        { prop: 'sellPrice', label: '零售价' },
        { prop: 'purchasePrice', label: '采购价' },
        { prop: 'updateTime', label: '价格更新日期', width: "200" },
        { prop: 'operation', slot: true, label: '操作', width: "300" }
    ],
    delelte: delFood,
    delelteAll: delFoods
}

// 添加
const add = () => {
    isId.value = 0;
    dialogVisible.value=true
}
let isId = ref<number>(0)
// 编辑
const edit = (id: number) => {
   dialogVisible.value=true
   isId.value = id
   // console.log(isId.value);
   
 }


</script>

<style scoped lang='less'></style>